class ChangeShop {
  constructor() {
    this.ipt = document.querySelectorAll("input");
    this.textarea = document.querySelector("textarea");
    this.showImg = document.querySelector("#showImg");
    this.changeBtn = document.querySelector("#changeBtn");
    // console.log(this.changeBtn);
    //因为要用到上个页面传来的pid，定义一个字符串，接受a标签的点击信息
    this.str = location.search;
    // console.log(this.str);
    this.pid = "";
    this.subStr();
    this.change();
  }
  //定义方法，用于获取上个页面传来的pid
  subStr() {
    let arr = this.str.split("&");
    // console.log(arr);
    // arr.forEach((item) => {
    //   let resArr = item.split("=");
    //   console.log(resArr);
    // });
    this.pid = arr[0].split("=")[1];
    console.log(this.pid);
  }
  //定义方法，修改商品信息
  change() {
    // 使用promise
    //首先要获取此商品原来的信息，根据pid
    // console.log(this.pid);
    new Promise((reslove, reject) => {
      let detailAPI = "http://jx.xuzhixiang.top/ap/api/detail.php";
      axios
        .get(detailAPI, {
          params: {
            id: this.pid,
          },
        })
        .then((res) => {
          //   console.log(res.data);
          let obj = res.data.data;
          console.log(obj);
          this.ipt[1].value = obj.pname;
          this.ipt[2].value = obj.pprice;
          this.textarea.value = obj.pdesc;
          this.showImg.src = obj.pimg;
          reslove(obj);
        });
    }).then((resObj) => {
      //resObj 是 上面传来的 obj
      //修改图片路径
      //   console.log(resObj.pimg);
      this.ipt[3].onchange = () => {
        // axios
        //   .post("http://jx.xuzhixiang.top/upload_file_qn.php", {
        //     headers: {
        //       "Content-Type": "application/x-www-form-urlencoded",
        //     },
        //     params: { file: this.ipt[3].files[0] },
        //   })
        //   .then((res) => {
        //     console.log(res.data);
        //   });
        //使用上传图片API获取,上传图片的绝对地址
        //   console.log(imgObj);
        let fd = new FormData();
        fd.append("file", this.ipt[3].files[0]);
        const xhr = new XMLHttpRequest();
        xhr.open("post", "http://jx.xuzhixiang.top/upload_file_qn.php");
        xhr.send(fd);
        xhr.onload = () => {
          let JSONStr = xhr.responseText;
          let obj = JSON.parse(JSONStr);
          resObj.pimg = obj.file_url; //重新传入图片地址
          console.log(resObj.pimg);
          this.showImg.src = resObj.pimg; //重新显示在页面上
        };
      };
      //点击修改按钮，实现商品信息的修改
      this.changeBtn.onclick = () => {
        // console.log(resObj);
        axios
          .get("http://jx.xuzhixiang.top/ap/api/goods/goods-update.php", {
            params: {
              pid: resObj.pid,
              pname: resObj.pname,
              pprice: resObj.pprice,
              pdesc: resObj.pdesc,
              pimg: resObj.pimg,
            },
          })
          .then((res) => {
            console.log(res.data);
            alert("修改成功");
            location.href = "uploadshop.html";
          });
      };
    });
  }
}
new ChangeShop();
